<template>
	<uni-popup ref="share" type="center">
		<div class="share">
			<div class="header">
				<text class="header-title">邀请好友加入</text>
				<img @click="close" src="../static/close.svg" class="close-icon" alt="" srcset="">
			</div>
			<div class="share-img-box">
				<img :src="img" class="share-img">
			</div>

			<button class="share-btn" open-type="share" :data-title="title" :data-code="code">
				<text>分享给朋友</text>
			</button>

		</div>
	</uni-popup>
</template>

<script>
	import {
		getRoomShareImg
	} from '../api/room'
	export default {
		name: "SharePopup",
		data() {
			return {
				shareImg: ''
			};
		},
		props: {
			img: String,
			code: String,
			title: String
		},

		methods: {
			open() {
				this.$refs.share.open()
			},
			close() {
				this.$refs.share.close()
			},

		},

	}
</script>

<style scoped lang="scss">
	.share::after {
		display: table;
		content: "";
		clear: both;
	}


	.share {
		background-color: white;
		border-radius: 30upx;
		width: 550upx;



		.header {
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.header-title {
				font-size: 30upx;
				font-weight: bolder;
			}

			.close-icon {
				width: 40upx;
				height: 40upx;
				position: absolute;
				right: 24upx;
				top: 20upx;
			}
		}

		.share-img-box {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 12upx;
			margin-bottom: 12upx;

			.share-img {
				width: 420upx;
				height: 420upx;
			}
		}

		.share-btn {

			width: 80%;
			height: 80upx;
			margin-left: auto;
			margin-right: auto;
			color: white;
			font-size: 30upx;
			font-weight: bold;
			border-radius: 8upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #000;
			margin-bottom: 32upx;
			margin-top: 24upx;
		}



	}
</style>